<template>
  <div>
    <el-form>
      <el-select v-model="model" :disabled="disabled" clearable filterable @change="change" :filter-method="userFilter">
        <el-option value="title" :disabled="true">
          <span class="option-span-short">贝位号</span>
          <span class="option-span-short">堆场号</span>
        </el-option>
        <el-option v-for="(item,index) in select" :key="index" :label="item.cyBayNo" :value="item.cyBayNo">
          <span class="option-span-short">{{ item.cyBayNo }}</span>
          <span class="option-span-short">{{ item.cyAreaNo }}</span>
        </el-option>
      </el-select>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/modules/basic-code/c-cy-bay/index'
export default {
  props: {
    code: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      model: '',
      select: [],
      allSelect: [],
    }
  },
  methods: {
    /*
     *  查询
     */
    async list(){
      const params = {}
      const res = await api.list(params)
      if (res.code === '00000000') {
        this['allSelect'] = res.data
        this.userFilter()
      }
    },
    /*
     *  选中值发生变化
     */
    change(value){
      this.$emit('update:code',value)
      if (!value) { // 单选清空-optons初始化下
        this.userFilter()
      }
    },
    /*
     *  过滤
     */
    userFilter(query = '') {
      this.model = query.toUpperCase()
      let arr = this.allSelect.filter((item) => {
        return item.cyBayNo.includes(query.toUpperCase())
      })
      if (arr.length > 10) {
        this.select = arr.slice(0, 10)
      } else {
        this.select = arr
      }
    },
  },
  mounted() {
  	this.list()
    this.model = this.code
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.option-span-short {
  display: inline-block;
  padding-right: 5px;
  width: 50px;
  text-align: center;
}

</style>
